<script setup>
    import { ref } from "vue";
    import { ElMessage } from "element-plus";
    // 引入用户信息状态管理
    import { useUserInfoStore } from "@/stores/userInfo.js";
    const userInfoStore = useUserInfoStore();
    // 引入 api
    import { updateUserService } from "@/api/user.js";

    // 用户信息模型
    const userInfo = ref({ ...userInfoStore.userInfo });
    // 表单验证规则
    const rules = {
        nickname: [
            { required: true, message: "请输入用户昵称", trigger: "blur" },
            {
                pattern: /^\S{2,10}$/,
                message: "昵称必须是2-10位的非空字符串",
                trigger: "blur",
            },
        ],
        email: [
            { required: true, message: "请输入用户邮箱", trigger: "blur" },
            { type: "email", message: "邮箱格式不正确", trigger: "blur" },
        ],
    };

    // 保存更新
    const update = async () => {
        // 发送请求
        const result = await updateUserService(userInfo.value);
        ElMessage.success(result.message ? result.message : "修改成功");
        // 更新状态管理数据
        userInfoStore.setUserInfo(userInfo.value);
    };
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>基本资料</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form
                    :model="userInfo"
                    :rules="rules"
                    label-width="100px"
                    size="large"
                >
                    <el-form-item label="登录名称">
                        <el-input
                            v-model="userInfo.username"
                            disabled
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickname">
                        <el-input v-model="userInfo.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="email">
                        <el-input v-model="userInfo.email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="update"
                            >提交修改</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>
